<template>
    <div class="dashboard-container">
       <div class="app-container">
         <el-card>
         <questionsHeader></questionsHeader>
          <!-- 标签页 -->
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
           <el-tab-pane label="全部" name="first">
             <!-- 题库列表 -->
             <questionBank :dateList="dateList" ></questionBank>
              <!-- 题库列表 -->
             <el-pagination
               fixed="right"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :page-sizes=5
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
             </el-pagination>
           </el-tab-pane>
           <el-tab-pane label="待审核" name="0">
             <questionBank :dateList="filterList" @click="handleClick" ></questionBank>
           </el-tab-pane>
           <el-tab-pane label="已审核" name="1">
             <questionBank :dateList="filterList" ></questionBank>
           </el-tab-pane>
           <el-tab-pane label="已拒绝" name="2">
             <questionBank :dateList="filterList" ></questionBank>
           </el-tab-pane>
         </el-tabs>
         <!-- 标签页 -->
         </el-card>
         <!-- 预览 -->
         <!-- <questionPreview></questionPreview> -->
          <!-- 预览 -->
        </div>
   </div>
   </template>

<script >
// 引入题库组件
import questionBank from '../components/question-bank.vue'
// 引入头部搜索组件
import questionsHeader from '../components/questions-header.vue'
// 引入题库列表接口
import { choice } from '@/api/hmmm/questions.js'
import { computed, onMounted, reactive, ref } from 'vue'

// 引入预览组件
// import questionPreview from '../components/question-preview.vue'

export default {
  name: 'questions-choice',
  components: { questionBank, questionsHeader },
  setup () {
    const activeName = 'first'
    // 题库页面数据
    const dateList = ref([])
    // 获取题库数据
    async function getDateList () {
      const { data } = await choice()
      const res = await choice()
      dateList.value = data.items
      console.log(dateList)
    }
    // 数据加载完成后初始化
    onMounted(() => {
      getDateList()
    })
    // 点击不同的标签页,返回不同的数组
    let filterList = ref([])
    // 审核状态
    const chkState = ref(0)
    filterList = computed(() => {
      filterList = dateList.value.filter(item => item.chkState === chkState.value)
      return filterList
    })
    // 点击
    function handleClick (pane) {
      chkState.value = (pane.props.name - 0)
      console.log('tabs上下文-字符串', pane.props.name)
      console.log(filterList)
    }

    return {
      dateList,
      getDateList,
      activeName,
      handleClick,
      filterList,
      chkState

    }
  }

}
</script>
